<template>
  <view class="">
    <view class="con">
      <u-form labelPosition="left" :model="formData" label-width="88" :rules="rules" ref="form">
        <view class="commonBox">
          <u-cell-group :border="false">
            <u-cell title="头像">
              <template #value>
                <!-- <image @click="changeUserPhoto" class="img" :src="formData.avatar" /> -->
                <view class="sctx">
                  <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                    <image class="img" :src="formData.avatar"></image>
                  </button>
                </view>
              </template>
            </u-cell>
          </u-cell-group>
        </view>
        <view class="commonBox">
          <u-form-item label="真实姓名" prop="name" borderBottom>
            <u-input v-model="formData.name" border="none" placeholder="请输入真实姓名" input-align="right"> </u-input>
          </u-form-item>
          <u-form-item label="名片公开" prop="endTime">
            <u-input border="none" readonly placeholder="交换名片可见" input-align="right">
              <template #suffix> <u-icon name="arrow-right" color="#e5e5e5"></u-icon> </template>
            </u-input>
          </u-form-item>
          <u-form-item label="性别" prop="sex" borderBottom @click="showSex = true">
            <u-input v-model="formData.sexCN" border="none" readonly placeholder="请选择" input-align="right">
              <template #suffix> <u-icon name="arrow-right" color="#e5e5e5"></u-icon> </template>
            </u-input>
          </u-form-item>
          <u-form-item label="手机号" prop="mobile" borderBottom>
            <u-input v-model="formData.mobile" border="none" placeholder="请输入手机号" input-align="right"> </u-input>
          </u-form-item>
          <u-form-item label="微信号" prop="wxId" borderBottom>
            <u-input v-model="formData.wxId" border="none" placeholder="请输入微信号" input-align="right"> </u-input>
          </u-form-item>
          <u-form-item label="公司单位" prop="company" borderBottom>
            <u-input v-model="formData.company" border="none" placeholder="请输入公司单位" input-align="right"> </u-input>
          </u-form-item>
          <u-form-item label="部门职务" prop="job" borderBottom>
            <u-input v-model="formData.job" border="none" placeholder="请输入部门职务" input-align="right"> </u-input>
          </u-form-item>
          <u-form-item label="常驻城市" prop="city" borderBottom @click="goPage('/pages/myPage/MyBusinessCard/getCity')">
            <u-input v-model="formData.city" readonly border="none" placeholder="请选择" input-align="right">
              <template #suffix> <u-icon name="arrow-right" color="#e5e5e5"></u-icon> </template>
            </u-input>
          </u-form-item>
        </view>
        <view class="commonBox">
          <u-form-item label="邮箱" prop="email">
            <u-input border="none" placeholder="请输入邮箱信息" v-model="formData.email" input-align="right"> </u-input>
          </u-form-item>
          <u-form-item label="生日" prop="birthday" borderBottom @click="birthdayShow = true">
            <u-input v-model="formData.birthday" border="none" readonly placeholder="请选择生日" input-align="right">
              <template #suffix> <u-icon name="arrow-right" color="#e5e5e5"></u-icon> </template>
            </u-input>
          </u-form-item>
          <u-form-item label="地址" prop="address" borderBottom>
            <u-input v-model="formData.address" border="none" placeholder="请选择地址" input-align="right"> </u-input>
          </u-form-item>
        </view>
        <view class="commonBox ywjs">
          <u-form-item label="业务介绍" prop="businessIntroduction">
            <u-input placeholder="输入内容" v-model="formData.businessIntroduction" maxlength="200" border="bottom"> </u-input>
          </u-form-item>
        </view>
        <view class="commonBox">
          <u-form-item label="学历" prop="newPassWord" border-bottom> <view class="addBox" @click="addPage('1')">新增</view> </u-form-item>
          <template v-if="formData.learnList.length > 0">
            <view class="newBox" v-for="(item, index) in formData.learnList" :key="index">
              <view class="first">
                <view class="left">{{ item.name }}</view>
                <view class="right">{{ item.startDate }} - {{ item.endDate }} <u-icon name="arrow-right" @click="editPage('1', item)" color="#e5e5e5"></u-icon></view>
              </view>
              <view class="des">{{ item.major }} {{ item.education }}</view>
              <view class="des">{{ item.introduction }}</view>
            </view>
          </template>
          <view v-else style="width: 100%; display: flex; justify-content: center; margin-top: 15rpx; padding-bottom: 20rpx">
            <u-empty mode="list"></u-empty>
          </view>
        </view>
        <view class="commonBox">
          <u-form-item label="工作经历" prop="newPassWord" border-bottom> <view class="addBox" @click="addPage('2')">新增</view> </u-form-item>
          <template v-if="formData.workList.length > 0">
            <view class="newBox" v-for="(item, index) in formData.workList" :key="index">
              <view class="first">
                <view class="left">{{ item.name }}</view>
                <view class="right">{{ item.startDate }} - {{ item.endDate }} <u-icon name="arrow-right" color="#e5e5e5" @click.stop="editPage('2', item)"></u-icon></view>
              </view>
              <view class="des">{{ item.job }} </view>
              <view class="des">{{ item.introduction }}</view>
            </view>
          </template>
          <view v-else style="width: 100%; display: flex; justify-content: center; margin-top: 15rpx; padding-bottom: 20rpx">
            <u-empty mode="list"></u-empty>
          </view>
        </view>
        <u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect"> </u-action-sheet>
        <u-datetime-picker
          :show="birthdayShow"
          mode="date"
          :minDate="-1160600505"
          closeOnClickOverlay
          @confirm="birthdayComfirm"
          @cancel="birthdayShow = false"
          @close="birthdayShow = false"
        ></u-datetime-picker>
      </u-form>
      <view class="buttomBox">
        <u-button @click="submit" shape="circle" text="提交" color="#1676fd"></u-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { goPage } from "@/utils/commonFn";
import { BASE_UPLOADURL } from "@/utils/request";
import dayjs from "dayjs";
// @ts-ignore
import { onShow } from "@dcloudio/uni-app";
import { useBCardStore } from "@/stores/bCard";
import { createCard, modifyCard } from "@/api/my";
const showSex = ref(false);
const birthdayShow = ref(false);
const actions = ref([
  {
    name: "男",
    value: "1",
  },
  {
    name: "女",
    value: "2",
  },
]);
const form = ref();
const formData = ref<any>({
  name: "",
  birthday: "",
  businessIntroduction: "",
  address: "",
  email: "",
  city: "",
  job: "",
  company: "",
  wxId: "",
  sex: "",
  sexCN: "",
  mobile: "",
  avatar: "",
  learnList: [],
  workList: [],
});
const rules = ref({
  name: {
    type: "string",
    required: true,
    message: "请填写姓名",
    trigger: ["change", "blur"],
  },
  sex: {
    type: "string",
    required: true,
    message: "请选择性别",
    trigger: ["change", "blur"],
  },
  mobile: [
    {
      required: true,
      message: "请输入手机号",
      trigger: ["change", "blur"],
    },
    {
      validator: (rule: any, value: string) => {
        //@ts-ignore
        return uni.$u.test.mobile(value);
      },
      message: "手机号码格式不正确",
      trigger: ["change", "blur"],
    },
  ],
  company: {
    type: "string",
    required: true,
    message: "请填写公司单位",
    trigger: ["change", "blur"],
  },
  city: {
    type: "string",
    required: true,
    message: "请选择常驻城市",
    trigger: ["change", "blur"],
  },
  email: [
    {
      required: false,
      message: "请填写邮箱",
      trigger: ["change", "blur"],
    },
    {
      validator: (rule: any, value: string) => {
        if (value) {
          //@ts-ignore
          return uni.$u.test.email(value);
        }
      },
      message: "邮箱格式不正确",
      trigger: ["change", "blur"],
    },
  ],
  address: {
    type: "string",
    required: true,
    message: "请填写地址",
    trigger: ["change", "blur"],
  },
  businessIntroduction: {
    type: "string",
    required: true,
    message: "请填写业务介绍",
    trigger: ["change", "blur"],
  },
});
// onMounted(() => {
//   if (useBCardStore().editCardInfo) {
//     console.log(useBCardStore().editCardInfo);
//     formData.value = useBCardStore().editCardInfo;
//     formData.value.sexCN = formData.value.sex === "1" ? "男" : "女";
//   }
// });
onShow(() => {
  if (useBCardStore().editCardInfo) {
    console.log(useBCardStore().editCardInfo);
    formData.value = useBCardStore().editCardInfo;
    formData.value.sexCN = formData.value.sex === "1" ? "男" : "女";
  }
  if (uni.getStorageSync("City_Name")) {
    formData.value.city = uni.getStorageSync("City_Name");
    form.value.validateField("city");
  }
});
onUnmounted(() => {
  uni.setStorageSync("City_Name", "");
});
const sexSelect = (e: any) => {
  formData.value.sex = e.value;
  formData.value.sexCN = e.name;
  form.value.validateField("sex");
};
const birthdayComfirm = (e: any) => {
  formData.value.birthday = dayjs(e.value).format("YYYY-MM-DD");
  birthdayShow.value = false;
  form.value.validateField("birthday");
};
const onChooseAvatar = (e: any) => {
  console.log(e);
  const { avatarUrl } = e.detail;
  console.log("微信图像", avatarUrl);
  uni.showLoading({
    title: "加载中",
  });
  uni.uploadFile({
    url: BASE_UPLOADURL,
    filePath: avatarUrl,
    header: {
      Authorization: uni.getStorageSync("token"),
    },
    name: "file",
    success: async (uploadFileRes) => {
      console.log(uploadFileRes);

      formData.value.avatar = JSON.parse(uploadFileRes.data).data;
    },
    complete() {
      //隐藏loading
      uni.hideLoading();
    },
  });
};
const addPage = (type: string) => {
  useBCardStore().setEditCardInfo(formData.value);
  goPage(`/pages/myPage/MyBusinessCard/addPage?pageType=${type}&opType=add`);
};
const editPage = (pageType: string, info: myTypes.LearnList) => {
  useBCardStore().setEditEduWorkInfo(info);
  useBCardStore().setEditCardInfo(formData.value);
  goPage(`/pages/myPage/MyBusinessCard/addPage?pageType=${pageType}&opType=edit`);
};
const submit = () => {
  console.log(formData.value);
  if (!formData.value.avatar) {
    uni.showToast({
      title: "请上传头像",
      icon: "none",
    });
    return;
  }
  form.value.validate().then(async () => {
    if (formData.value.id) {
      delete formData.value.authFlag;
      delete formData.value.level;
      delete formData.value.userId;
      await modifyCard(formData.value);
    } else {
      await createCard(formData.value);
    }
    uni.showToast({
      title: "添加成功",
      icon: "success",
    });
    // 关注申请审核通知
    // 关注申请通知
    uni.requestSubscribeMessage({
      tmplIds: ["zDgQbqtBBuBwGbEmtAYBiPWE8vdKMW1ILc_vIgSjCdk", "UsGcL0kUCbAzqbJd_mbf7lYq-M9KstkGNDWxR6FPe84"],
      success() {},
      complete() {
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      },
    });
  });
};
</script>

<style lang="less" scoped>
.commonBox {
  padding-top: 0rpx;
  padding-bottom: 0rpx;
}
.con {
  padding-bottom: 120rpx;
  margin-top: 20rpx;
}
/deep/.u-input {
  padding: 14rpx 0px !important;
}
/deep/ .u-line {
  border-color: #f7f7f7 !important;
}
/deep/ .u-border-bottom {
  border-color: #f7f7f7 !important;
}
.img {
  width: 96rpx;
  height: 96rpx;
  background: #ebeff8;
  border-radius: 50%;
  margin-right: 10rpx;
}
/deep/ .u-cell__body {
  padding: 16rpx 0 !important;
}
.newBox {
  padding-top: 20rpx;
  padding-bottom: 36rpx;
  border-bottom: 1px solid #f8f8f8;
  .first {
    display: flex;
    justify-content: space-between;

    .left {
      font-size: 30rpx;
      color: #1e1e1e;
      line-height: 42rpx;
    }
    .right {
      font-size: 26rpx;
      font-family: DINPro, DINPro;
      color: #a8a8a8;
      line-height: 34rpx;
      display: flex;
      align-items: center;
    }
  }
  .des {
    font-size: 26rpx;
    font-weight: 500;
    color: #a8a8a8;
    line-height: 36rpx;
    margin-top: 16rpx;
  }
}
.addBox {
  text-align: right;
  font-size: 30rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #1676fd;
  line-height: 42rpx;
}
.ywjs {
  /deep/ .u-form-item__body {
    flex-direction: column !important;
  }
}
/deep/ .u-form-item__body__right__message {
  text-align: right !important;
}
.sctx {
  button::after {
    border: none;
  }
  button {
    border-color: #fff !important;
    background: rgba(0, 0, 0, 0) !important;
    height: 110rpx;
  }
}
</style>
